<template>
	<view class="shanghu">
		<!-- #ifdef MP-WEIXIN -->
		<view class="head" :style="{height: pHeight + tHeight + 'px'}">
			<view class="xztitle" :style="[{height: pHeight + 'px', top: tHeight + 'px',lineHeight: pHeight + 'px'}]">
				{{biaoti}}
				<view class="iconfont icon-dayuhao1" @click="fanhui"></view>
			</view>
		</view>
		<view class="headtop" :style="{marginTop: pHeight + tHeight + 'px'}">
			<view class="left clearfix" v-if="zhuangtai == 1">
				<image :src="baseUrl + '/wximage/index_zhiying.png'"></image>
				<view class="name">
					<text>直营</text>
					<text @click="qiehuansx(2)" v-if="role_id == 1 || role_id == 11">团队</text>
				</view>
			</view>
			<view class="left clearfix" v-else>
				<image :src="baseUrl + '/wximage/index_tuandui.png'"></image>
				<view class="name name1">
					<text @click="qiehuansx(1)">直营</text>
					<text>团队</text>
				</view>
			</view>
			<view class="right clearfix">
				<!-- <view class="jinggao fl" v-if="role_id != 12" @click="topage('/subpackageA/user/second/warn')">
					<image :src="baseUrl + '/wximage/index_jinggao.png'"></image>
					<text>警告</text>
				</view> -->
				<view class="jinggao fr" @click="topage('/subpackageA/user/second/message')">
					<image :src="baseUrl + '/wximage/index_xiaoxi.png'" v-if="xiaoxizhuangtai == 0"></image>
					<image :src="baseUrl + '/wximage/index_xiaoxi1.png'" v-else></image>
					<text>消息</text>
				</view>
			</view>
		</view>
		<!-- #endif -->
		<view class="content">
			<view class="tongji clearfix" v-if="role_id != 12">
				<view class="left fl">
					<view class="top">
						<view class="qiehuan clearfix">
							<text :class="[attrIndex==1?'active':'']" @click="qiehuan(1)">今日</text>
							<text :class="[attrIndex==2?'active':'']" @click="qiehuan(2)">昨日</text>
							<text :class="[attrIndex==3?'active':'']" @click="qiehuan(3)">本月</text>
						</view>
						<view class="more" @click="topage('/subpackageA/home/second/data')">
							查看更多>>
						</view>
					</view>
					<view class="bottom">
						<view class="money">{{paymoney}}</view>
						<view class="text">订单支付金额(元)</view>
					</view>
				</view>
				<view class="right fr">
					<view class="shang clearfix">
						<view class="list fl">
							<view class="count">{{ddcount}}</view>
							<view class="desc">订单总数(笔)</view>
						</view>
						<view class="list fr">
							<view class="count">{{sbcount}}</view>
							<view class="desc">设备总数(台)</view>
						</view>
					</view>
					<view class="shang xia clearfix">
						<view class="list fl">
							<view class="count">{{azcount}}</view>
							<view class="desc">总安装数(台)</view>
						</view>
						<view class="list fr">
							<view class="count">{{zxcount}}</view>
							<view class="desc">总在线数(台)</view>
						</view>
					</view>
				</view>
			</view>
			<view class="tongji clearfix" v-else>
				<view class="left fl">
					<view class="top">
						<view class="qiehuan clearfix">
							<text :class="[attrIndex==1?'active':'']" @click="qiehuan(1)">今日</text>
							<text :class="[attrIndex==2?'active':'']" @click="qiehuan(2)">昨日</text>
							<text :class="[attrIndex==3?'active':'']" @click="qiehuan(3)">本月</text>
						</view>
						<view class="more" @click="topage('/subpackageA/user/fund/index')">
							去提现>>
						</view>
					</view>
					<view class="bottom">
						<view class="money">{{symoney}}</view>
						<view class="text">收益金额(元)</view>
					</view>
				</view>
				<view class="right fr">
					<view class="shang clearfix">
						<view class="list fl">
							<view class="count">{{ddcount}}</view>
							<view class="desc">订单总数(笔)</view>
						</view>
						<view class="list fr">
							<view class="count">{{sbcount}}</view>
							<view class="desc">设备总数(台)</view>
						</view>
					</view>
					<view class="shang xia clearfix">
						<view class="list fl">
							<view class="count">{{azcount}}</view>
							<view class="desc">总安装数(台)</view>
						</view>
						<view class="list fr">
							<view class="count">{{zxcount}}</view>
							<view class="desc">总在线数(台)</view>
						</view>
					</view>
				</view>
			</view>
			<view class="gonggao" @click="topage('/subpackageA/home/second/ggdetail?id=' + gonggao_id)" v-if="gonggaoList.length!=0">
				<u-notice-bar :list="gonggaoList" bgColor="none" padding="0" mode="horizontal" speed="200"></u-notice-bar>
			</view>
		</view>
		<view class="nav clearfix" v-if="role_id != 12">
			<view class="list fl" @click="topage('/subpackageA/merchant/index')">
				<image :src="baseUrl + '/wximage/index_ruzhu.png'"></image>
				<text>新商户入驻</text>
			</view>
			<view class="list fl" @click="topage('/subpackageA/order/index')" v-if="limits.orderfind == true">
				<image :src="baseUrl + '/wximage/index_order.png'"></image>
				<text>订单查询</text>
			</view>
			<view class="list fl" @click="topage('/subpackageA/device/install')">
				<image :src="baseUrl + '/wximage/index_install.png'"></image>
				<text>设备安装</text>
			</view>
		</view>
		<view class="nav clearfix" v-else>
			<view class="list fl" @click="topage('/subpackageA/business/detail?bussinid=' + agent_id + '&attr=chakan')">
				<image :src="baseUrl + '/wximage/index_ruzhu.png'"></image>
				<text>商户信息</text>
			</view>
			<view class="list fl" @click="topage('/subpackageA/order/index')" v-if="limits.orderfind == true">
				<image :src="baseUrl + '/wximage/index_order.png'"></image>
				<text>订单查询</text>
			</view>
			<view class="list fl" @click="topage('/subpackageA/store/income')">
				<image :src="baseUrl + '/wximage/index_shouyi.png'"></image>
				<text>门店收益</text>
			</view>
		</view>
		<view class="navigation clearfix" v-if="role_id != 12">
			<view class="fenlei fl beijing4" @click="topage('/subpackageA/agent/index')" v-if="role_id == 1">
				<image :src="baseUrl + '/wximage/fenlei4.png'"></image>
				<view class="title">代理商</view>
			</view>
			<view class="fenlei fl beijing2" @click="topage('/subpackageA/business/index')">
				<image :src="baseUrl + '/wximage/fenlei2.png'"></image>
				<view class="title">商户管理</view>
			</view>
			<view class="fenlei fl beijing3" @click="topage('/subpackageA/staff/index')" v-if="role_id != 13">
				<image :src="baseUrl + '/wximage/fenlei3.png'"></image>
				<view class="title">员工管理</view>
			</view>
			<view class="fenlei fl beijing6" @click="topage('/subpackageA/store/income')">
				<image :src="baseUrl + '/wximage/fenlei6.png'"></image>
				<view class="title">门店收益</view>
			</view>
			<view class="fenlei fl beijing5" @click="topage('/subpackageA/store/index')">
				<image :src="baseUrl + '/wximage/fenlei7.png'"></image>
				<view class="title">门店管理</view>
			</view>
			<view class="fenlei fl beijing1" @click="topage('/subpackageA/store/add')">
				<image :src="baseUrl + '/wximage/fenlei8.png'"></image>
				<view class="title">门店新建</view>
			</view>
			<view class="fenlei fl beijing2" @click="topage('/subpackageA/store/allocation')">
				<image :src="baseUrl + '/wximage/fenlei9.png'"></image>
				<view class="title">门店分配</view>
			</view>
			<view class="fenlei fl beijing6" @click="topage('/subpackageA/work/index')" v-if="role_id == 1">
				<image :src="baseUrl + '/wximage/fenlei10.png'"></image>
				<view class="title">工单管理</view>
			</view>
			<view class="fenlei fl beijing2" @click="topage('/subpackageA/store/map')">
				<image :src="baseUrl + '/wximage/fenlei11.png'"></image>
				<view class="title">门店地图</view>
			</view>
			<view class="fenlei fl beijing1" @click="topage('/subpackageA/equipment/index')">
				<image :src="baseUrl + '/wximage/fenlei14.png'"></image>
				<view class="title">设备管理</view>
			</view>
			<view class="fenlei fl beijing5" @click="topage('/subpackageA/goods/index')">
				<image :src="baseUrl + '/wximage/fenlei15.png'"></image>
				<view class="title">商品管理</view>
			</view>
		</view>
		<view class="footer clearfix" v-if="role_id == 1 || role_id == 11">
			<view class="nr fl clearfix" @click="topage('/subpackageA/card/index')">
				<view class="shu fl"></view>
				<view class="name fl">会员卡</view>
				<image :src="baseUrl + '/wximage/card.png'" class="fl"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseUrl: getApp().globalData.baseUrl,
				headerTop: 0,
				pHeight: 0,
				tHeight: 0,
				biaoti: '',
				zhuangtai: 1,
				gonggaoList: [],
				gonggao_id: '',
				attrIndex: 1,
				paymoney: '0.00',
				symoney: '0.00',
				ddcount: 0,
				sbcount: 0,
				azcount: 0,
				zxcount: 0,
				agent_id: '',
				role_id: '',
				xiaoxizhuangtai: 0,
				limits: {
					orderfind: false,//订单查看
					payouts: false,//分成比例
					endorder: false,//收益记录
					returnorder: false,//按日统计
				}
			}
		},
		created() {
			// 头部距离
			let res = uni.getSystemInfoSync() ///微信api方法
			let titleH;
			if (res && res['system']) {
				// 判断是否是安卓操作系统 （标题栏苹果为44px,安卓为48px）
				if (res['system'].indexOf('Android') > 0) {
					titleH = 48
				} else {
					titleH = 46
				}
				this.headerTop = titleH + res['statusBarHeight']
				this.pHeight = titleH
				this.tHeight = res['statusBarHeight']
			}
			
			//获取基本配置信息
			this.request({
				url: '/xcx/webconfig',
				data: {}
			}).then(res => {
				if (res.data.code == 200) {
					this.biaoti = res.data.data.x_name;
				} else {
					uni.showToast({
						title: '请求失败，请稍后再试',
						icon: 'none'
					})
				}
			})
			
			this.agent_id = uni.getStorageSync('agent_id');
			this.role_id = uni.getStorageSync('role_id');
			
			// 获取用户信息
			this.request({
				url: '/agent/users',
				data: {
					id: this.agent_id,
				},
				method: "POST"
			}).then(res => {
				if (res.data.code == 200) {
					let arr = JSON.parse(res.data.data.cities);
					this.limits = arr;
				} else {
					uni.showToast({
						title: '请求失败，请稍后再试',
						icon: 'none'
					})
				}
			})
			
			//获取数据统计
			this.getTongji(this.zhuangtai,this.attrIndex);
			
			// 获取系统公告
			this.request({
				url: '/xcx/article1',
				data: {
					category_id: 17,
					role_id: this.role_id
				}
			}).then(res => {
				if (res.data.code == 200) {
					this.gonggaoList.push(res.data.data[0].title)
					this.gonggao_id = res.data.data[0].id;
				} else {
					uni.showToast({
						title: '请求失败，请稍后再试',
						icon: 'none'
					})
				}
			})
			
			// 获取消息的读取状态
			this.request({
				url: '/xcx/noticezhuangtai',
				data: {
					agent_id: uni.getStorageSync('agent_id'),
					role_id: uni.getStorageSync('role_id'),
				},
				method: "POST"
			}).then(res => {
				if (res.data.code == 200) {
					this.xiaoxizhuangtai = res.data.data.zhuangtai;
				} else {
					uni.showToast({
						title: '请求失败，请稍后再试',
						icon: 'none'
					})
				}
			})
		},
		methods: {
			getTongji(zhuangtai,attrIndex){
				this.request({
					url: '/agent/tongji',
					data: {
						agent_id: this.agent_id,
						role_id: this.role_id,
						zhuangtai: zhuangtai,
						attrIndex: attrIndex,
					},
					method: "POST"
				}).then(res => {
					if (res.data.code == 200) {
						this.paymoney = res.data.data.summoney;
						this.symoney = res.data.data.symoney;
						this.ddcount = res.data.data.ddcount;
						this.sbcount = res.data.data.shebeicount;
						this.azcount = res.data.data.shebeianzhuang;
						this.zxcount = res.data.data.shebeianzaixian;
					} else {
						uni.showToast({
							title: '请求失败，请稍后再试',
							icon: 'none'
						})
					}
				})
			},
			//切换时间筛选
			qiehuan(index) {
				this.attrIndex = index;
				
				this.getTongji(this.zhuangtai,this.attrIndex);
			},
			//切换直营、团队
			qiehuansx(index){
				this.zhuangtai = index;
				this.attrIndex = 1;
				
				this.getTongji(this.zhuangtai,this.attrIndex);
			},
			topage(url) {
				uni.navigateTo({
					url
				})
			},
			//返回
			fanhui() {
				uni.redirectTo({
					url: '/pages/index/index'
				})
			},
			kaifa() {
				uni.showToast({
					title: '暂未开放',
					icon: 'none'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.shanghu {
		width: 100%;
		margin: 0 auto;
		background: #f9f9ff;
		height: 100vh;
		overflow-y: scroll;
		padding-bottom: 140rpx;

		.head {
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 99;
			background: linear-gradient(90deg, #f9f9ff, #d5e6ff);

			.xztitle {
				position: fixed;
				left: 0%;
				top: 0;
				width: 100%;
				text-align: center;
				color: #333333;
				font-size: 32rpx;
			}
			
			.iconfont {
				position: absolute;
				top: 0;
				left: 14rpx;
				font-size: 44rpx;
			}
		}

		.headtop {
			background: linear-gradient(90deg, #f9f9ff, #d5e6ff);
			width: 100%;
			padding: 4% 3%;
			box-sizing: border-box;
			height: 300rpx;

			.left {
				width: 272rpx;
				float: left;
				position: relative;

				image {
					width: 100%;
					height: 60rpx;
				}

				.name {
					position: absolute;
					width: 100%;
					left: 0;
					top: 0;

					text {
						height: 60rpx;
						line-height: 60rpx;
						color: #f4f7ff;
					}

					text:nth-of-type(1) {
						position: absolute;
						left: 70rpx;
						color: #ffffff;
						font-size: 28rpx;
						font-weight: 700;
					}

					text:nth-of-type(2) {
						position: absolute;
						left: 186rpx;
					}
				}

				.name1 {
					text:nth-of-type(1) {
						left: 12%;
						font-size: 28rpx;
						font-weight: 400;
					}

					text:nth-of-type(2) {
						font-size: 28rpx;
						font-weight: 600;
					}
				}
			}

			.right {
				width: 30%;
				float: left;
				margin-top: 10rpx;
				margin-left: 30%;

				.jinggao {
					width: 100rpx;
					position: relative;

					image {
						width: 100%;
						height: 40rpx;
					}

					text {
						position: absolute;
						top: 0;
						left: 44rpx;
						height: 40rpx;
						line-height: 40rpx;
						color: #ffffff;
						font-size: 24rpx;
					}
				}
			}
		}

		.content {
			width: 94%;
			margin: 0 auto;
			background: #ffffff;
			border-radius: 20rpx;
			padding: 3%;
			box-sizing: border-box;
			margin-top: -180rpx;

			.tongji {

				.left {
					width: 294rpx;
					background: #f6f8ff;
					border-radius: 16rpx;
					box-sizing: border-box;

					.top {
						margin-top: 20rpx;

						.qiehuan {
							width: 70%;
							margin-left: 30%;

							text {
								padding: 0 10rpx;
								float: left;
								height: 36rpx;
								line-height: 36rpx;
								text-align: center;
								color: #9b9b9b;
								font-size: 24rpx;
							}

							.active {
								background: #5c88fa;
								color: #ffffff;
								border-radius: 20rpx;
							}
						}

						.more {
							text-align: right;
							margin-top: 20rpx;
							color: #5c88fa;
							margin-right: 24rpx;
						}
					}

					.bottom {
						margin-top: 48rpx;
						margin-left: 30rpx;
						margin-bottom: 20rpx;

						.money {
							font-size: 50rpx;
							color: #333333;
							font-weight: 600;
						}

						.text {
							margin-top: 12rpx;
							color: #3b3b3b;
						}
					}
				}

				.right {
					width: 350rpx;

					.shang {
						width: 100%;
						background: #f6f8ff;
						border-radius: 16rpx;

						.list {
							width: 50%;
							text-align: center;
							padding: 20rpx 0;

							.count {
								font-size: 40rpx;
								margin-bottom: 20rpx;
							}

							.desc {
								font-size: 24rpx;
							}
						}
					}

					.xia {
						margin-top: 16rpx;
					}
				}
			}
			
			.gonggao{
				margin-top: 28rpx;
			}
		}

		.nav {
			width: 94%;
			margin: 20rpx auto 0;

			.list {
				width: 224rpx;
				margin-right: 16rpx;
				position: relative;

				image {
					width: 100%;
					height: 140rpx;
				}

				text {
					position: absolute;
					left: 64rpx;
					top: 30rpx;
					color: #333333;
					font-size: 24rpx;
					font-weight: 700;
				}
			}

			.list:nth-of-type(3n) {
				margin-right: 0;
			}
		}

		.navigation {
			width: 94%;
			margin: 20rpx auto 0;
			background: #ffffff;
			border-radius: 12rpx;
			padding: 3% 3% 0;
			box-sizing: border-box;

			.fenlei {
				width: 32%;
				margin-right: 2%;
				height: 106rpx;
				line-height: 106rpx;
				text-align: center;
				margin-bottom: 22rpx;
				border-radius: 20rpx;

				image {
					width: 54rpx;
					height: 54rpx;
					margin-right: 10rpx;
					float: left;
					margin-left: 22rpx;
					margin-top: 24rpx;
				}

				.title {
					float: left;
					color: #333333;
					font-size: 24rpx;
					font-weight: 700;
				}
			}

			.fenlei:nth-of-type(3n) {
				margin-right: 0;
			}

			.beijing1 {
				background: #fffaf7;
			}

			.beijing2 {
				background: #f8f6fd;
			}

			.beijing3 {
				background: #fef1f2;
			}

			.beijing4 {
				background: #fffcf0;
			}

			.beijing5 {
				background: #f1fbff;
			}

			.beijing6 {
				background: #fff4ee;
			}
		}
		
		.footer{
			width: 94%;
			margin: 20rpx auto 0;
			
			.nr{
				width: 224rpx;
				background: #ffffff;
				border-radius: 16rpx;
				margin-right: 16rpx;
				height: 88rpx;
				line-height: 88rpx;
				
				.shu{
					width: 4rpx;
					height: 28rpx;
					background: #5D89FA;
					border-radius: 2rpx;
					margin-left: 20rpx;
					margin-top: 30rpx;
				}
				
				.name{
					font-size: 24rpx;
					color: #333333;
					font-weight: 700;
					margin-left: 16rpx;
				}
				
				image{
					float: right;
					width: 60rpx;
					height: 60rpx;
					margin-top: 14rpx;
					margin-right: 14rpx;
				}
			}
			
			.nr:nth-of-type(3n){
				margin-right: 0;
			}
		}
	}
</style>